import React, {Component} from 'react';
// import TitleBar from '../views/TitleBar.js';
import ListItem from '../../views/ListItem.js';
import ListItemDivider from '../../views/ListItemDivider.js';
import Global from '../../utils/Global';
import {Dimensions,
    Image,
    PixelRatio,
    ScrollView,
    StyleSheet,
    Text,
    TouchableOpacity,
    View} from 'react-native';
import BaseNavigationBar           from '../../views/BaseNavigationBar';
import * as BaseAPI                from "../../utils/BaseAPI";
import Toast, {DURATION}           from 'react-native-easy-toast';
import StorageUtil                 from "../../utils/StorageUtil";
import LoadingView                 from '../../views/LoadingView';
import  ItemCell                   from '../../views/ItemCell';
const {width} = Dimensions.get('window');

export default class MeScreen extends Component {
    static navigationOptions = {
        tabBarLabel: '我的',
        tabBarIcon: ({focused, tintColor}) => {
            if (focused) {
                return (
                    <Image style={styles.tabBarIcon} source={require('../../../images/tab/tab_my_selected.png')}/>
                );
            }
            return (
                <Image style={styles.tabBarIcon} source={require('../../../images/tab/tab_my_normal.png')}/>
            );
        },
    };

    constructor(props) {
        super(props);
        this.state = {
            showProgress:false,
            Uid:'',
            NickName:'',
            Balance:'',
            Beans:''
        };
    }

    componentWillMount() {
        StorageUtil.get('token',(error,object)=>{
            if (!error && object != null)
            {
                this.getUserInfoData(object.token);
            }
        });
    }

    getUserInfoData(token){
        this.setState({showProgress:true});
        fetch(BaseAPI.GetUserInfoDataUrl+token, {
            method:'GET',
        }).then((res)=>res.json())
            .then((json)=>{

                console.log('获取用户信心555'+ json+ JSON.stringify(json));

              this.setState({showProgress:false});
              if (json.ret === 0){
                  this.setState({Uid:json.user.uid});
                  this.setState({NickName:json.user.nickname});
                  this.setState({Beans:json.user.pay_golds+json.user.golds});
                  this.setState({Balance:json.user.balance});
              }else{
                  this.refs.toast.show('获取用户信息失败');
              }
            })
            .catch((e)=>{
                this.setState({showProgress:false});
                this.refs.toast.show('网络请求出错：' + e);
            })
    }

    goModifyHeadIcon(){
        this.props.navigation.navigate("ModifyHead")
    }

    goUserInfoData(){
        this.props.navigation.navigate("PersonalInfo")
    }

    // 荷豆
    goBeanData(){
        this.props.navigation.navigate("Beans")
    }

    // 现金余额
    goCashBalanceData(){
        this.props.navigation.navigate("CashBalance")
    }

    render() {
        return (
            <View style={styles.container}>
                <ScrollView >

                    <View style={styles.headViewStyle}>
                        <View style={styles.userInfoViewStyle}>
                            <TouchableOpacity activeOpacity={1} onPress={this.goModifyHeadIcon.bind(this)}>
                                <Image
                                    style={styles.headIconStyle}
                                    source={{url:BaseAPI.GetUserAvatarDataUrl+this.state.Uid}}
                                />
                            </TouchableOpacity>

                            <Text style={styles.nickStyle}>{this.state.NickName}</Text>
                            <View style={{flex:1,backgroundColor:'white'}} />
                            <TouchableOpacity activeOpacity={1} onPress={this.goUserInfoData.bind(this)}>
                                <Image
                                    style={styles.arrowStyle}
                                    source={require('../../../images/my/arrowWhite.png')}
                                />
                            </TouchableOpacity>

                        </View>

                        <View style={{width:width,height:20}}/>

                        {/*<View style={styles.otherViewStyle}>*/}
                          {/*<View style={styles.otherBgViewStyle}>*/}

                              {/*<TouchableOpacity activeOpacity={1} onPress={this.goBeanData.bind(this)}>*/}
                                  {/*<View style={styles.beanViewStyle}>*/}
                                      {/*<Text style={styles.numberStyle}>{this.state.Beans}</Text>*/}
                                      {/*<Text style={styles.titleStyle}>荷豆</Text>*/}
                                  {/*</View>*/}
                              {/*</TouchableOpacity>*/}


                             {/*<View style={{marginTop:10,marginBottom:10,width:1,backgroundColor:'#dddddd'}}/>*/}

                              {/*<TouchableOpacity activeOpacity={1} onPress={this.goCashBalanceData.bind(this)}>*/}
                                  {/*<View style={styles.cashViewStyle}>*/}
                                      {/*<Text style={styles.numberStyle}>{this.state.Balance}</Text>*/}
                                      {/*<Text style={styles.titleStyle}>现金余额</Text>*/}
                                  {/*</View>*/}
                              {/*</TouchableOpacity>*/}


                          {/*</View>*/}

                        {/*</View>*/}

                    </View>

                    <ListItem icon={require('../../../images/my/icon-xinxi.png')} text={"个人信息"} handleClick={() => {
                    this.props.navigation.navigate("PersonalInfo")
                    }}/>
                    <ListItemDivider/>
                    <ListItem icon={require('../../../images/my/icon-jilu.png')} text={"试玩记录"} handleClick={() => {
                        this.props.navigation.navigate("Records")
                    }}/>
                    <ListItemDivider/>
                    {/*<ListItem icon={require('../../../images/my/icon-shiming.png')} text={"实名认证"} handleClick={() => {*/}
                        {/*this.props.navigation.navigate("Certification")*/}
                    {/*}}/>*/}
                    {/*<ListItemDivider/>*/}

                    <ListItem icon={require('../../../images/my/icon-qvan.png')} text={"领取优惠券"} handleClick={() => {
                        this.props.navigation.navigate("ReceiveCoupons")
                    }}/>
                    <ListItemDivider/>
                    <ListItem icon={require('../../../images/my/icon-guanyu.png')} text={"关于小游荷包"} handleClick={() => {
                        this.props.navigation.navigate("About")
                    }}/>

                </ScrollView>

                 <Toast ref="toast" position='center'/>

                { this.state.showProgress ?
                    (<LoadingView cancel={() => this.setState({showProgress:false})}/>):(null)}

                <View style={styles.divider} />
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor:'#f0f0f0'
    },
    divider: {
        width: width,
        height: 1/PixelRatio.get(),
        // backgroundColor: '#D3D3D3'
    },
    otherViewStyle:{
        justifyContent:'center',
        alignItems:'center',
        backgroundColor:'#f0f0f0',
        height:80
    },
    otherBgViewStyle:{
        backgroundColor:'white',
        height:60,
        width:width-40,
        borderRadius:5,
        marginTop:-50,
        marginLeft:20,
        marginRight:20,
        flexDirection:'row',
        alignItems:'center'
    },
    beanViewStyle:{
        width:(width-41)/2,
       justifyContent:'center',
       alignItems:'center',
    },
    numberStyle:{
        fontSize:15,
        color:'#fe7133',
        marginBottom:4,
    },
    cashViewStyle:{
        width:(width-41)/2,
        justifyContent:'center',
        alignItems:'center',
    },
    titleStyle:{
        fontSize:15,
        color:'#333333'
    },

    nickStyle:{
        color:'#f0f0f0',
        fontSize:15,
        marginLeft:15
    },
    // content: {
    //     flex: 1,
    //     width: width,
    //     flexDirection: 'column',
    //     backgroundColor: '#d8d8d8'
    // },
    headViewStyle:{
        flexDirection: 'column',
        // justifyContent:'center',
        // alignItems:'center',
        backgroundColor:'#ff4114',
        // height:200,
        height:120
        // flexDirection:'row',
    },
    userInfoViewStyle:{
        alignItems:'center',
        // backgroundColor:'#ff4114',
        // height:0.56*150,
        // marginTop:0.56*64,
        height:120,
        marginTop:10,
        flexDirection:'row',
        width:width
    },
    headIconStyle:{
        marginLeft:0.56*54,
        height:0.56*120,
        width:0.56*120,
        borderWidth:4,
        borderColor:'#facd89',
        borderRadius:0.56*60

    },
    arrowStyle:{
        position: "absolute",
        right:0.56*54,
        width:15,
        height:15
    },
    tabBarIcon: {
        width:0.56*48,
        height:0.56*32,
    },
    logoStyle:{
        height:100,
        width:100,

        // width:100,
    },
});
